<template>
	<view class="">
		<view class="title">您好！欢迎使用xxx</view>
		<image class="logo" src="/static/imgs/logo.png" mode="widthFix"></image>
		<view class="slogan">
			<!-- 记录孩子的眼健康 让孩子远离近视 -->
		</view>
		<view class="secret">
			<view class="select">
				<u-checkbox-group>
					<u-checkbox @change="setChecked" v-model="checked" shape="circle" active-color="#96cb0e"></u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="text">
				我已阅读并同意
				<text class="policy" @click="gotoPolicy">《xxx用户协议和隐私政策》</text>
				，未注册的手机号将自动创建账号
			</view>
		</view>
		<view class="login">
			<u-button @click="loginBtn" text="微信授权登录" color="#96CB0E"></u-button>
		</view>
	</view>
</template>

<script>
import {login} from "@/common/http.api.js"
export default {
	data() {
		return {
			checked: false,
			// type:'',
			token: ''
		};
	},
	methods: {
		gotoPolicy() {
			uni.navigateTo({
				// url: '/pages/login/components/privacy-policy'
			});
		},
		loginBtn() {
			// if(this.type != 0){ //获取用户的订阅信息
			// 	uni.requestSubscribeMessage({
			// 	  tmplIds: ['0WTigs0Se4pXTTsWcUo6Nq5NAmq1jH_kCtaeDD7GAB0','RV-PFTgP5f2AoVDJMtbNziyRDEP87gJIJv_8-063rMg'],
			// 	  complete (res) {
			// 	  }
			// 	})
			// }
			let that = this;
			if (!this.checked) {
				uni.showToast({
					title: '请先阅读并同意《OG眼宝宝用户协议和隐私政策》',
					icon: 'none',
					duration: 2000
				});
			} else {
				uni.showLoading({
					title: '正在登录...',
					mask: true
				});
				uni.login({
					success: function (event) {
						console.log('event:', event);
						const { code } = event;
						const userType = that.type;
						login({ code })
							.then((res) => {
								that.$u.vuex('userInfo.token', res);
								// 隐藏加载中效果
								uni.hideLoading();
							})
							.catch((error) => {
								console.error(error);
								// 隐藏加载中效果
								uni.hideLoading();
							});
					},
					fail: function (err) {
						console.error(err);
						// 隐藏加载中效果
						uni.hideLoading();
					}
				});
			}
		},
		setChecked(e) {
			console.log('e:', e);
			this.checked = e;
		}
	}
};
</script>

<style lang="scss" scoped>
.title {
	font-size: 38rpx;
	position: absolute;
	left: 60rpx;
	top: 131rpx;
}

.logo {
	position: absolute;
	width: 180rpx;
	height: 180rpx;
	top: 286rpx;
	left: 50%;
	transform: translateX(-50%);
}
.slogan {
	position: absolute;
	width: 100%;
	text-align: center;
	top: 480rpx;
	font-size: 30rpx;
	left: 0;
}
.secret {
	display: flex;
	align-items: flex-start;
	position: absolute;
	top: 550rpx;
	width: 650rpx;
	left: 50%;
	transform: translateX(-50%);

	.select {
		margin-top: 5rpx;
	}

	.text {
		font-size: 24rpx;
		margin-left: 10rpx;
		line-height: 40rpx;
	}
}
.login {
	width: 90%;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 750rpx;
	border-radius: 20rpx;
	overflow: hidden;
	background-color: #96cb0e;
	button {
		width: 702rpx;
		height: 80rpx;
		border-radius: 20rpx;
		background-color: #96cb0e;
		font-size: 30rpx !important;
		color: #ffffff;
		line-height: 80rpx;
		text-align: center;
	}
}
::v-deep .u-button--success {
	width: 702rpx;
	height: 80rpx;
	border-radius: 20rpx;
	background-color: #96cb0e;
}

::v-deep .u-button__text {
	font-size: 30rpx !important;
}

.login {
	width: 90%;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 750rpx;
	border-radius: 20rpx;
	overflow: hidden;
}

.policy {
	color: #96cb0e;
}
</style>